<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/common.jsp" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定会员卡</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.4 -->
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
    <!-- FontAwesome 4.3.0 -->
    <style type="text/css">
		.conetnt_div{
			width: 70%;
			margin-left: auto;
			margin-right: auto;
		}
		.conetnt_div table {
			width: 100%;
			height:300px;
			margin: 30px 0px 0px 0px;
		}
		.conetnt_div table td{
			height: 30px;
			line-height: 30px;
			padding: 0px 10px 0px 10px
		}
		.conetnt_div table tr{
			margin-top:20px;
		}
		.button_td{
			text-align: center;
		}
    </style>
</head>
<body>
<div class="wrapper">
	<div class = "conetnt_div">
		<form class="form-horizontal" id="send_member_cardv">
			<table>
				<tr>
					<td>
						<label for="member_phone">手机号：</label>
					</td>
					<td colspan="2">
						<input type="text" class="form-control validate[required,custom[phone],maxSize[11]]" id="member_phone" placeholder="手机号">
					</td>
				</tr>
				<!-- <tr>
					<td>
						<label for="member_name">联系人：</label>
					</td>
					<td colspan="2">
						<input type="text" class="form-control" id="member_name" placeholder="联系人">
					</td>
				</tr> -->
				<tr>
					<td>
						<label for="member_outerCode">条形码：</label>
					</td>
					<td colspan="2">
						<input type="text" class="form-control" id="member_outerCode" placeholder="条形码">
					</td>
				</tr>
				<tr>
					<td>
						<label for="member_vcode">验证码：</label>
					</td>
					<td>
						<input type="text" class="form-control" id="member_vcode" placeholder="验证码">
					</td>
					<td><button type="button"  class="btn btn-primary" onClick="sendSmsCode()" id="sms_send_btn"><i class="fa fa-download space"></i><span id="send_smscode_pin">发送</span>  <span id="send_timing"></span></button></td>
				</tr>
				<tr>
					<td colspan="3" class="button_td">
						<button type="button"  class="btn btn-primary" id="gs_submitbtn" onClick="addMemberCrad()"><i class="fa fa-download space"></i>发卡</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<!-- jQuery 2.1.4 -->
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!--Bootstrap v3.3.4-->
<!-- datatable -->
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script>
$(function(){
	$('#member_phone').bind("blur",function(){
		verifiyCrad();
	});
})
//type为1 时则失去焦点时验证，为2 时点击提交时验证
function verifiyCrad(){
	var flag = $("#send_member_cardv").validationEngine("validate");
	var phone = $('#member_phone').val();
	if(!flag){
		return;
	}
	$.ajax({
		type:'post', 
		url:"${ctx}/api/membercard/getMemberInfoByPhone",
		data:{"phone":phone},
		dataType:'json',
		error:function(){
			layer.alert("加载中会员信息错误,请检查网络");
		},
		success:function(data){
			var flag = false;
			var member;
			if(data.code == 200){
				member = data.member;
				if(member){
					var status = member.status;
					if(status == 2){
						flag = true;
					}
				}
			}
			//if(flag){
				//var memberName = member.memberName;
				//$('#member_name').val(memberName);
				//$('#member_name').attr("readonly", true);
			//}else{
				//$('#member_name').attr("readonly", false);
				//$('#member_name').val("");
			//}
		} 
	});
}
//发卡
function addMemberCrad(){
	$('#gs_submitbtn').attr("disabled", true);
	var flag = $("#send_member_cardv").validationEngine("validate");
	if(!flag){
		$('#gs_submitbtn').attr("disabled", false);
		return;
	}
	//var member_name = $('#member_name').val();
	var member_outerCode = $('#member_outerCode').val();
	var member_vcode = $('#member_vcode').val();
	/* if(member_name.trim().length < 1){
		layer.tips("联系人不能为空","#member_name",{tips: 1});
		$('#gs_submitbtn').attr("disabled", false);
		return;
	} */
	if(member_outerCode.trim().length < 1){
		layer.tips("条形码不能为空","#member_outerCode",{tips: 1});
		$('#gs_submitbtn').attr("disabled", false);
		return;
	}
	if(member_vcode.trim().length < 1){
		layer.tips("验证码不能为空","#member_vcode",{tips: 1});
		$('#gs_submitbtn').attr("disabled", false);
		return;
	}
	verifySmsCode();
}
//验证短信码
function verifySmsCode(){
	var smsCode = $('#member_vcode').val();
	var phone = $('#member_phone').val();
	if(smsCode.trim().length < 1){
		layer.tips("验证码不能为空","#member_vcode",{tips: 1});
		$('#gs_submitbtn').attr("disabled", false);
		return;
	}
	$.ajax({
		type:'post', 
		url:"${ctx}/api/membercard/verifySmsCode",
		data:{"smsCode":smsCode,"phone":phone},
		dataType:'json',
		error:function(){
			layer.alert("验证短信验证码错误,请检查网络");
			$('#gs_submitbtn').attr("disabled", false);
		},
		success:function(data){
			if(data.code == 200){
				//执行挂失操作
				addMemberCardSubmit();
			}else{
				layer.msg(data.msg);
				$('#gs_submitbtn').attr("disabled", false);
			}
		}
	});
}
//添加会员卡
function addMemberCardSubmit(){
	var member_phone = $('#member_phone').val();
	//var member_name = $('#member_name').val();
	var member_outerCode = $('#member_outerCode').val();
	$.ajax({
		type:'post', 
		url:"${ctx}/api/membercard/bindMemberCard",
		data:{"phone":member_phone,"outerCode":member_outerCode},
		dataType:'json',
		error:function(){
			layer.alert("服务端错误,请检查网络");
			$('#gs_submitbtn').attr("disabled", false);
		},
		success:function(data){
			if(data.code == 200){
				layer.msg('操作成功');
				$('#gs_submitbtn').hide();
				setTimeout(function(){
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				},1000);
			}else{
				layer.msg(data.msg);
				$('#gs_submitbtn').attr("disabled", false);
			}
		}
	});
}
//发送短信验证码
var setIntervalSmsFun;
function sendSmsCode(){
	var phone = $('#member_phone').val();
	var flag = $("#send_member_cardv").validationEngine("validate");
	if(!flag){
		return;
	}
	setSnedBtn(true,"发送中....");
	$.ajax({
		type:'post', 
		url:"${ctx}/api/membercard/sendSmsCode",
		data:{"phone":phone},
		dataType:'json',
		error:function(){
			layer.alert("发送短信验证码错误,请检查网络");
			setSnedBtn(false,"发送");
		},
		success:function(data){
			if(data.code == 200){
				setSnedBtn(true,"已发送");
				$('#send_timing').html(60);
				setIntervalSmsFun = window.setInterval(function(){
					var count = parseInt($("#send_timing").html());
					if(count > 0){
						$("#send_timing").html(count - 1);
					}else{
						window.clearInterval(setIntervalSmsFun);
						$('#send_timing').html("");
						setSnedBtn(false,"发送");
					}
				},1000);
			}else{
				layer.msg('发送短信验证码失败');
				setSnedBtn(false,"发送");
			}
		}
	});
}
function setSnedBtn(b,msg){
	$('#send_smscode_pin').html(msg);
	$('#sms_send_btn').attr("disabled", b);
}
</script>
</body>
</html>